<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${sectionName}"></title>
    <head th:insert="~{import :: head}"></head>
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <style>
        .ui.modal.tiny{
            height: 187px !important;
        }
        .openCLose:hover{
            cursor:pointer;
            color:blue;
        }
        .two_level{
            /*align:right;*/
            display:none;
        }
    </style>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="m-padding-bt-mini m-container-middle" style="min-height: 800px;">
    <div class="ui container m-margin-bt-middle">
        <form action="/admin/comment" method="GET" class="ui form segment">
            <div class="inline fields">
                <div class="field">
                    <input type="text" name="search" placeholder="评论内容" th:value="${search}">
                </div>
                <div class="field">
                    <a href="/admin/comment" class="ui compact button">clear</a>
                    <button class="ui mini teal button"><i class="search icon"></i>搜索</button>
                </div>
            </div>
        </form>
        <table class="ui table">
            <thead>
                <tr>
                    <th class="center aligned"></th>
                    <th class="center aligned">序号</th>
                    <th class="center aligned">评论内容</th>
                    <th class="center aligned">评论人</th>
                    <th class="center aligned">点赞数量</th>
                    <th class="center aligned">是否匿名</th>
                    <th class="center aligned">评论时间</th>
                    <th class="center aligned">操作</th>
                </tr>
            </thead>
                <tbody>
                    <div th:each="comment,iterStat : ${pagination.data}">
                        <tr>
                            <td th:data-id="${comment.id}" class="center aligned" th:classappend="${comment.secondComment.size() != 0 ? 'openCLose' : ''}" th:text="${comment.secondComment.size() != 0 ? '+' : ''}">+</td>
                            <td class="center aligned" th:text="${(pagination.page - 1) * size + iterStat.count}">1</td>
                            <td class="center aligned" th:text="${comment.content}">内容</td>
                            <td class="center aligned" th:text="${comment.commentUser.name}">王凯旋</td>
                            <td class="center aligned" th:text="${comment.likeCount}">8</td>
                            <td class="center aligned" th:text="${comment.anonymous == 1 ? '是' : '否'}">是</td>
                            <td class="center aligned" th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd HH:mm')}">2019-10-28</td>
                            <td class="center aligned">
                                <a href="#" class="ui mini red button" style="color: #fff !important;" onClick="removeComment()" th:data-parent="${comment.parentId}" th:data-id="${comment.id}" th:data-content="${comment.content}" th:data-name="${comment.commentUser.name}" th:data-type="${comment.type}" th:data-like="${comment.likeCount}" th:data-comment="${comment.commentCount}">删除</a>
                            </td>
                        </tr>
                        <tr class="two_level" th:classappend="${'two_level_' + comment.id}" th:each="secondComment,itemStat : ${comment.secondComment}">
                            <td class="center aligned"></td>
                            <td class="right aligned" th:text="${itemStat.count}">1</td>
                            <td class="center aligned" th:text="${secondComment.content}">内容</td>
                            <td class="center aligned" th:text="${secondComment.commentUser.name}">王凯旋</td>
                            <td class="center aligned" th:text="无">8</td>
                            <td class="center aligned" th:text="${secondComment.anonymous == 1 ? '是' : '否'}">是</td>
                            <td class="center aligned" th:text="${#dates.format(secondComment.gmtCreate,'yyyy-MM-dd HH:mm')}">2019-10-28</td>
                            <td class="center aligned">
                                <a href="#" class="ui mini red button" style="color: #fff !important;" onClick="removeComment()" th:data-parent="${secondComment.parentId}" th:data-id="${secondComment.id}" th:data-content="${secondComment.content}" th:data-name="${secondComment.commentUser.name}" th:data-type="${secondComment.type}">删除</a>
                            </td>
                        </tr>
                    </div>
                </tbody>
            <tfoot>
                <th colspan="8">
                    <div class="ui pagination menu right floated">
                        <a href="" class="item" th:if="${pagination.showPrevious}" th:href="@{/admin/comment/(page=${pagination.page - 1},search=${search})}">上一页</a>
                        <a href="" class="item" th:if="${pagination.showNext}" th:href="@{/admin/comment/(page=${pagination.page + 1},search=${search})}">下一页</a>
                    </div>
                </th>
            </tfoot>
        </table>
    </div>
</div>
<div class="ui tiny modal">
    <div class="header">
        删除评论
    </div>
    <div class="content">
        是否删除该评论
    </div>
    <div class="actions">
        <div class="ui button teal cancel">取消</div>
        <div class="ui button red approve" style="color: #fff !important;">确认</div>
    </div>
</div>
<div th:insert="~{footer :: foot}"></div>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    // 点击显示二级评论的表格
    $('.openCLose').click(function(){
        var text = $(this).text();
        var data = $(this).attr('data-id');
        var two_level_class = '.two_level_' + data;
        if(text=='+'){
            $(this).text('-');
            $(two_level_class).show();
        }else{
            $(this).text('+');
            $(two_level_class).hide();
        }
    });
    function removeComment(){
        event.preventDefault();
        let id = event.target.getAttribute("data-id");
        let content = event.target.getAttribute("data-content");
        let name = event.target.getAttribute("data-name");
        let parentId = event.target.getAttribute("data-parent");
        let likeCount = 0;
        let commentCount = 0;
        let type = event.target.getAttribute("data-type");

        if(type === '1'){
            likeCount = event.target.getAttribute("data-like");
            commentCount = event.target.getAttribute("data-comment");
        }

        $(".tiny.modal").find(".content").text(`是否删除${name}发表的 "${content}" 评论`);
        $('.tiny.modal').modal({
            closable: false,
            onDeny: function(){
                return true;
            },
            onApprove: function(){
                $.ajax({
                    type: "DELETE",
                    url: `/comment/${id}`,
                    data: `type=${type}&likeCount=${likeCount}&commentCount=${commentCount}&parentId=${parentId}`,
                    success: function (response) {
                        if (response.code == 200) {
                            window.location.reload();
                        } else {
                            if (response.code == 2003) {
                                var isAccepted = confirm(response.message);
                                if (isAccepted) {
                                    $('#myModal').modal({});
                                    // window.open("https://github.com/login/oauth/authorize?client_id=7f316909bf70d1eaa2b2&redirect_uri=" + document.location.origin + "/callback&scope=user&state=1");
                                    // window.localStorage.setItem("closable", true);
                                }
                            } else {
                                alert(response.message);
                            }
                        }
                    }
                });
                return true;
            }
        }).modal('show');
    }
</script>
</body>
</html>